<template>
   <div class="main">
     <div class="sea">
       <van-icon name="arrow-left" class="back" @click="click" />
       <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch" class="left">搜索</div>
        </template>
      </van-search>
     </div>
    <p class="name">
      <span :class="{active:flag==0}" @click="latestpurchase">最新供应信息</span>
      <span :class="{active:flag==1}" @click="latestsupply">最新采购信息</span>
    </p>
  </div>
  <router-view></router-view>
</template>

<script>
import router from "../../router";
import {ref,onMounted} from "vue"
export default {
  setup(){
    const value = ref('');
    const flag=ref(0);
    const latestpurchase=()=>{
      localStorage.setItem("flag","0")
      flag.value=0
      router.push('/purchaselist');
    }
    const latestsupply=()=>{
      localStorage.setItem("flag","1")
      flag.value=1
      router.push('/supplylist');
    }
    const click=()=>{
      router.go(-1)
    }
    const onSearch=()=>{
      console.log(1);
    }
    onMounted(()=>{
      if(localStorage.getItem("flag")){
        flag.value=localStorage.getItem("flag");
      }
    })
    return {flag,latestpurchase,latestsupply,value,click,onSearch}
  }
}
</script>

<style scoped>
.sea{
  display: flex;
  justify-content: space-around;
  position: relative;
  border-bottom: 1px solid #ccc;
}
.sea .back{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left:10px
}
.main{
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  position: fixed;
  left: 0;
  top: 0;
  background: #fff;
  z-index: 999;
}
.main .name{
  margin: 0;
  /* color: #4cc79b; */
  color: gray;
  font-size: 18px;
  padding: 5px 0;
  border-bottom: 1px solid #f2f2f2;
}
.active{
  color: #4cc79b;
  font-size: 22px;
}
.main .name span{
  margin-right: 30px;
}
</style>